<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>问卷调查</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="css/mui.min.css"/>
  <link rel="stylesheet" href="picker/css/mui.picker.css"/>
  <link rel="stylesheet" href="picker/css/mui.dtpicker.css"/>
  <link rel="stylesheet" href="boot/bootstrap.css"/>
  <link rel="stylesheet" href="css/index.css"/>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="boot/bootstrap.js"></script>
  <script src="js/mui.min.js"></script>
  <script src="picker/js/mui.picker.js"></script>
  <script src="picker/js/mui.dtpicker.js"></script>
  <script type="text/javascript" charset="utf-8">mui.init();</script>
</head>
<body>
<header>Wings问卷调查</header>
<section>
  <header>感谢各位家长今天到访参加泡泡少儿英语的公开课，希望本次公开课为您和您的宝宝带来欢乐。当然我们非常在意您的感受，您的意见和反馈将会是帮助我们提升和成长的最好动力。</header>
  <div class="formSection">
    <label for="date">
      <span class="info">1.参加公开课时间:</span>
      <input id="date" onclick="showDate()" readonly="readonly"/>
      <b class="redStar">*</b>
    </label>
    <div>
      <span class="info">2. 学生信息</span>
      <div class="input-group">
        <span class="input-group-addon" id="name">学生姓名:</span>
        <input type="text" class="form-control" placeholder="请输入姓名" aria-describedby="name">
      </div>
      <div class="input-group">
        <span class="input-group-addon" id="age">学生年龄:</span>
        <input type="text" class="form-control" placeholder="岁" aria-describedby="age">
      </div>
      <div class="input-group">
        <span class="input-group-addon" id="tel">联系电话:</span>
        <input type="text" class="form-control" placeholder="请输入电话" aria-describedby="tel">
        <b class="redStar">*</b>
      </div>
    </div>
    <div class="picker"></div>
    <!--单选框-->
    <div class="checkNum like">
      <span class="info">3. 学习中心的整体氛围您是否喜欢？（满分5分）</span><b class="redStar">*</b>
      <ul class="mui-table-view mui-table-view-radio" style="border: 1px solid #ddd">
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">1</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">2</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">3</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">4</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">5</a>
        </li>
      </ul>
    </div>
    <div class="checkNum satisfy">
      <span class="info">4. 本次公开课体验，整体的安排是否满意？（满分5分）</span><b class="redStar">*</b>
      <ul class="mui-table-view mui-table-view-radio" style="border: 1px solid #ddd">
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">1</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">2</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">3</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">4</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">5</a>
        </li>
      </ul>
    </div>
    <div class="checkNum interest">
      <span class="info">5. 您是否对泡泡少儿的课程感兴趣？（满分5分）</span><b class="redStar">*</b>
      <ul class="mui-table-view mui-table-view-radio" style="border: 1px solid #ddd">
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">1</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">2</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">3</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">4</a>
        </li>
        <li class="mui-table-view-cell">
          <a class="mui-navigate-right">5</a>
        </li>
      </ul>
    </div>
    <button type="button" class="btn btn-primary btn-lg btn-block">提交</button>
  </div>
</section>
<footer>新东方泡泡Wings数据统计</footer>
<script>
  var studentData={
    time:"",
    name:"",
    age:"",
    tel:"",
    like:"",
    satisfy:"",
    interest:""
  }
//  var time,name,age,tel,like,satisfy,interest;
  $('button').click(function(){
    selectTime();//判断是否选择了日期
    studentData.name=$('input[aria-describedby="name"]').val();//获得姓名
    studentData.age=$('input[aria-describedby="age"]').val();//获得年龄
    telNumber();//验证手机号码的正确性
    studentData.tel=$('input[aria-describedby="tel"]').val();//获得手机号
    studentData.like=$('.like li.mui-selected a').html();//喜欢的分数
    studentData.satisfy=$('.satisfy li.mui-selected a').html();//满意的分数
    studentData.interest=$('.interest li.mui-selected a').html();//兴趣的分数
    console.log("日期:"+studentData.time+" 姓名:"+studentData.name+" 年龄:"+studentData.age+" 电话"+studentData.tel+" "+studentData.like+" "+studentData.satisfy+" "+studentData.interest);
    selectError();
    selectNum();
    mui.toast(
      message="信息填写不完整！",
      allback=function(){
        $('input').val("");
      }
    );
    mui.alert(
      message="提交成功，谢谢！",
      allback=function(){
        $('input').val("");
      }
    );
  });
  //日期选择器
  function showDate(){
    var dtPicker = new mui.DtPicker({
      type:'date'
    });
    dtPicker.show(function (selectItems) {
      //获得日期主键的时间
      var year=selectItems.y.text;
      var month=selectItems.m.text;
      var day=selectItems.d.text;
      studentData.time=year+"年"+month+"月"+day+"日";
      $('#date').val(studentData.time);
      dtPicker.dispose();//释放日期组件，防止卡顿
    });
  }
  //判断是否选择了日期
  function selectTime(){
    if(this.time==undefined){
      $('#date').addClass("redBorder");
    }else{
      $('#date').removeClass("redBorder");
    }
  }
  function telNumber(){  //验证手机号的正确性
    //var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    //var myreg = /^((\d3)|(\d{3}-))?13[0-9]\d{8}|15[89]\d{8}/;
    var myreg = /^1(3|4|5|7|8)\d{9}$/;
    if(!myreg.test($('input[aria-describedby="tel"]').val())){
      //如果手机号不正确边框变红，添加redBorder的样式
      $('input[aria-describedby="tel"]').addClass("redBorder");
    }else{
      $('input[aria-describedby="tel"]').removeClass("redBorder");
    }
  };
  function selectNum(){
    $('li:not(li.mui-selected)').parent().addClass("redBorder");
    console.log($('ul:not(ul li.mui-selectd)'));
//    console.log($('ul.mui-table-view>li.mui-selected').length);
  }
  function selectError(){ //检查时候有没有填写完整
    if( $('input').hasClass("redBorder")){
//      alert("内容填写不完整")
    }
  }
</script>
</body>
</html>